<template>
  <!-- 购物车组件 -->
  <view class="shoppingList">
           <view class="List-item">
               <!-- 左边按钮 -->
              <view class="checkbox-box" @click="checkboxClick">
                <view class="checkbox-button" v-if="isCheckout"></view>
              </view>
              <!-- 衣服img -->
              <view class="leftImg">
                <image src="../../pages/shooping/images/image.png" mode=""></image>
              </view>
              <!-- 详情 -->
              <view class="rightBox">
                <view class="delBox">x</view>
                <text class="title">网纹套圈</text>
                <text class="man">￥30</text>
                    <!-- 加减组件 -->
                    <view class="addSp">
                      <view class="jia">-</view>
                         <view class="input">1</view>
                      <view class="jia">+</view>
                    </view>
              </view>
              
           </view>
  </view>
</template>

<script setup>
  import { ref } from 'vue';
  const isCheckout=ref(false)
  const checkboxClick=()=>{
    isCheckout.value = !isCheckout.value
    console.log(isCheckout.value)
  }
</script>

<style lang="scss" scoped>
  .shoppingList{
    position: relative;
    // margin-top: 20rpx;
    top: 20%;
    left: 39.25rpx;
    .List-item{
      display: flex;
      align-items: center;
        .checkbox-box{
          position: relative;
          top: 0;
          margin-right: 23rpx;
          width: 40rpx;
          height: 40rpx;
          border: 1px solid  rgba(254, 120, 37, 1);
          border-radius: 50%;
              .checkbox-button{
                position: absolute;
                left: 50%;
                top: 50%;
                transform: translate(-50%,-50%);
                width: 30rpx;
                height: 30rpx;
                background-color: rgba(254, 120, 37, 1) ;
                border-radius: 50%;
              }
        }
        .leftImg{
          width: 195.23rpx;
          height: 194.3rpx;
          border-radius:16rpx 0px 0px 16rpx;
          // border-radius: ;
          image{
            width: 100%;
            height: 100%;
          }
        }
        .rightBox{
          .delBox{
            position: absolute;
            right:10%;
            top: -5rpx;
            width: 40rpx;
            height: 40rpx;
            background-color: red;
            border-radius: 50%;
            text-align: center;
            line-height: 36rpx;
          }
          width: 442.76rpx;
          height: 194.3rpx;
          opacity: 1;
          border-radius: 0px 16rpx 16rpx 0rpx;
          background: rgba(255, 249, 253, 0.3);
          .title{
            display: block;
            margin-top: 10rpx;
            font-size: 24rpx;
            margin-bottom: 90rpx;
          }
          .man{
            font-size: 36rpx;
          }
          .addSp{
            position: absolute;
            top: 70%;
            right: 10%;
            display: flex;
                .input{
                  margin: 0 15rpx;
                }
                .jia{
                  width: 41rpx;
                  height: 41rpx;
                  border-radius: 12rpx;
                  border: 1rpx solid rgba(254,120,37,1);
                  text-align: center;
                  line-height: 35rpx;
                }
          }
        }
    }
  }
  
</style>